<style scoped>
.doclist .shark {
    padding: 0 30px;
}

.doclist .fast {
    font-size: 20px;
    color: #f39312;
    letter-spacing: 1px;
}

.doclist .main .ivu-select,
.main .ivu-input {
    border-radius: 0 2px 2px 0;
}

.doclist .common-box-body {
    padding-top: 24px;
}
.doclist .fixed-bottom {
    padding-left: 30px;
    padding-right: 40px;
    height: 80px;
    line-height: normal !important;
    position: fixed;
    left: 210px;
    right: 0;
    bottom: 0;
    z-index: 999;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.28);
}
.doclist .sidehide {
    left: 75px;
}
.doclist .detail {
    margin-top: 20px;
    margin-bottom: 15px !important;
}
</style>
<style>
.doclist
    .common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-placeholder,
.common-box-body
    .ivu-select-single
    .ivu-select-selection
    .ivu-select-selected-value {
    padding-right: 0px;
}

.doclist .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    color: #2d8cf0;
    border-color: transparent;
    background-color: #fff;
}

.doclist .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    color: #808080;
    border: 1px solid #dddee1;
    border-bottom: 0;
}
.doclist button.ivu-btn {
    border-radius: 2px !important;
}
</style>


<template>
    <div class="doclist">
        <product-title></product-title>
        <div class="shark" style="padding:0 30px;">
            <div class="fast">快速搜索</div>
            <div class="common-box-body">
                <Form>
                    <Row>
                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Select v-model="formdata.pcompanyName" filterable placeholder="选择保险公司" :transfer=true>
                                <Option value=" ">全部</Option>
                                <Option v-for="(option, index) in comoptions" :value="option.name" :key="index">{{option.name}}</Option>
                            </Select>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Select placeholder="选择机构类型" v-model="formdata.pinsuranceName" filterable>
                                <Option value=" ">全部</Option>
                                <Option v-for="item in orglist" :value="item.shortn" :key="item.id">{{item.shortn}}</Option>
                            </Select>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <Input placeholder="员工姓名" v-model="formdata.empName"></Input>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="4">
                        <FormItem>
                            <DatePicker type="month" placeholder="请选择月" v-model="monthDate" @on-change="datachange2($event)"></DatePicker>
                        </FormItem>
                        </Col>

                        <Col :md="24" :lg="{span:4,offset:4}">
                        <Button size="large" class="fr" type="primary" icon="ios-search" @click="search">搜索</Button>
                        </Col>
                    </Row>
                    <div style="border-bottom:1px solid #BEBEBE;"></div>
                    <Row style="margin-top:20px;">
                        <Col span="24" class="table-action">
                        <div class="fr">
                            <Upload action="" :format="['xlsx']" name="file_input" :before-upload="handleUploadWl">
                                <Button type="info" size="large" class="fr" icon="icon iconfont icon-daoru">导入清单</Button>
                            </Upload>
                        </div>
                        <div style="border-right: 1px solid #EDF2F6;padding-right:15px;" class="fr">
                            <a href="https://192.168.0.10:82/kb/v1/excel/download/应收清单下载模板.xlsx">
                                <Button type="info" size="large" class="fr" icon="icon iconfont icon-daochu">应收清单模板下载</Button>
                            </a>
                        </div>
                        </Col>
                    </Row>
                </Form>
            </div>

            <div class="detail">
                <div class="clearfix">
                    <div class="table-theme highlight_table">
                        <Table ref="currentRowTable" size="large" height="670" stripe border :columns="columns1" :data="tableList" class=""></Table>
                    </div>
                </div>
            </div>
            <div style="margin-bottom:50px;"></div>
            <div :class="slidetoggle?'fixed-bottom':'fixed-bottom sidehide' ">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="24" class="tRight">
                    <Page :total="totals" ref='pages' :current="currentpage" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
import productTitle from "../../components/productTitle";

import { parteGetByName } from "../../api/parter";
import { getCateList, getListByName } from "../../api/yun_org";
import util from "../../libs/util.js";
export default {
    data() {
        return {
            tableList: [],
            p: 1, //对页面页数的定义-->初始化
            pagesize: 10, //对页面的定义,出事定义10条数据
            totals: 0,
            currentpage: 1,
            comoptions: [],
            orglist: [],
            cateList: [],
            yearDate: "",
            monthDate: "",
            formdata: {
                p: 1, //对页面页数的定义-->初始化
                pagesize: 10, //对页面的定义,出事定义10条数据
                pinsuranceName: "", //保险公司
                pcompanyName: "", //分支机构
                empName: "", //机构代码
                yearDate: "", //年
                monthDate: "" //月
            },
            policylist: [],
            columns1: [
                {
                    title: "分公司",
                    key: "companyName",
                    align: "center",
                    width: 100,
                    fixed: "left"
                },
                {
                    title: "保险公司",
                    key: "insuranceName",
                    align: "center",
                    width: 100,
                    fixed: "left"
                },
                {
                    title: "保单号",
                    key: "insuranceNo",
                    align: "center",
                    width: 150
                },
                {
                    title: "产品名称",
                    key: "productName",
                    align: "center",
                    width: 200
                },
                // {
                //     title: "保单状态",
                //     key: "insuranceStatus",
                //     align: "center",
                //     width: 80
                // },
                {
                    title: "催缴备注",
                    key: "reminderNotes",
                    align: "center",
                    width: 100
                },
                {
                    title: "投保人",
                    key: "applicantName",
                    align: "center",
                    width: 150
                },
                {
                    title: "被保人",
                    key: "insuredName",
                    align: "center",
                    width: 150
                },
                {
                    title: "业务员",
                    key: "empName",
                    align: "center",
                    width: 150
                },
                {
                    title: "生效日期",
                    key: "startDate",
                    align: "center",
                    width: 150
                },
                {
                    title: "实收日期",
                    key: "receivedDate",
                    align: "center",
                    width: 150,
                    render: (h, params) => {
                        return h(
                            "div",
                            params.row.receivedDate == "1970-01-01"
                                ? "-"
                                : params.row.receivedDate
                        );
                    }
                },
                {
                    title: "年份",
                    key: "yearDate",
                    align: "center",
                    width: 80
                },
                {
                    title: "月份",
                    key: "monthDate",
                    align: "center",
                    width: 80
                },
                // {
                //     title: "缴费期间",
                //     key: "payTime",
                //     align: "center",
                //     width: 80
                // },
                {
                    title: "缴费金额",
                    key: "payMoney",
                    align: "center",
                    width: 80
                },
                {
                    title: "投保人联系方式",
                    key: "applicantPhone",
                    align: "center",
                    width: 150
                },
                {
                    title: "通讯地址",
                    key: "applicantAddress",
                    align: "center",
                    width: 200
                },
                {
                    title: "扣款银行",
                    key: "bankName",
                    align: "center",
                    width: 200
                },
                {
                    title: "扣款账号",
                    key: "bankAccount",
                    align: "center",
                    width: 200
                },
                {
                    title: "应收保费",
                    key: "recMoney",
                    align: "center",
                    width: 100
                },
                {
                    title: "实收保费",
                    key: "receivedMoney",
                    align: "center",
                    width: 100
                },
                {
                    title: "实收件数",
                    key: "receivedNum",
                    align: "center",
                    width: 100
                },  
                // {
                //     title: "自保件数",
                //     key: "selfInsNum",
                //     align: "center",
                //     width: 150,
                //     render: (h, params) => {
                //         return h(
                //             "div",
                //             params.row.selfInsNum? params.row.selfInsNum == "-1"? "-": params.row.selfInsNum: "-"
                //         );
                //     }
                // },
                // {
                //     title: "是否是自保件",
                //     key: "selfIns",
                //     align: "center",
                //     width: 100,
                //     render: (h, params) => {
                //         return h(
                //             "div",
                //             {},
                //             params.row.selfIns ? params.row.selfIns : "-"
                //         );
                //     }
                // }
            ]
        };
    },
    components: {
        productTitle
    },
    computed: {
        slidetoggle() {
            return this.$store.state.sildeshow;
        }
    },
    created() {},
    mounted() {
        this.cominit();
        this.orglistinit();
        this.getList();
    },
    methods: {
        orglistinit() {
            new Promise((resolve, reject) => {
                let _params = {
                    name: ""
                };
                getListByName(_params)
                    .then(response => {
                        console.log(response.data);
                        if (response.data.err == 0) {
                            this.orglist = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        //时间转换
        datachange2(date) {
            console.log(date, "...date");
            if (date) {
                this.formdata.yearDate = new Date(date).getFullYear();
                this.formdata.monthDate = new Date(date).getMonth() + 1;
                // this.formdata.monthDate =
                //     this.formdata.monthDate < 10
                //         ? "0" + this.formdata.monthDate
                //         : this.formdata.monthDate;
            } else {
                this.formdata.yearDate = "";
                this.formdata.monthDate = "";
            }
        },
        // 保险公司
        cominit() {
            console.log(this.$refs);
            new Promise((resolve, reject) => {
                let _params = {
                    name: ""
                };
                parteGetByName(_params)
                    .then(response => {
                        if (response.data.err == 0) {
                            this.comoptions = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    })
                    .catch(error => {
                        reject(error);
                    });
            });
        },
        //上传之前
        handleUploadWl(file) {
            var _this = this;
            let param = new FormData();
            param.append("file", file);
            var url = BASE_URL1 + "/kb/v1/excel/importYS";    
            util.ajax
                .post(url, param, {
                    headers: { "Content-Type": "multipart/form-data" }
                })
                .then(function(res) {
                    if (res.data.code == 0) {
                        _this.$Message.success(res.data.info);
                        _this.formdata.p = 1;
                        _this.p = 1;
                        _this.getList();
                    } else {
                        _this.$Message.error(res.data.info);
                    }
                })
                .catch(res => {});
            return false;
        },
        //获取页面信息getList
        getList() {
            var _this = this;
            console.log(_this.formdata, "111");
            var url = BASE_URL1 + "/kb/v1/find/yingShou";  
            util.ajax
                .get(url, {
                    params: _this.formdata
                })
                .then(function(res) {
                    console.log(res, "res");
                    if (res.data.code == 0) {
                        _this.totals = res.data.data.total;
                        _this.tableList = res.data.data.dataList;
                    } else {
                        _this.$Message.error(res.data.info);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        // 页码改变
        pageChange(p) {
            this.p = p;
            this.formdata.p = p;
            this.getList();
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize;
            this.formdata.pagesize = pagesize;
            this.getList();
        },
        /**@augments
         *
         */
        // 点击搜索,进行数据搜索
        search() {
            console.log(this.formdata, ".....search");
            this.getList();
        }
    }
};
</script>